<template>
  <div>
    <PageTitle title='销售统计'></PageTitle>
    <div class="date-pick">
      <el-date-picker
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateChange()"
          :picker-options="pickerOptions2"
          >
        </el-date-picker>
      </el-col>
    </div>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>成交额</span>
        <span>500.00</span>
        &nbsp;
        &nbsp;
        &nbsp;
        <span>最高成交额</span>
        <span>1000.00</span>
      </div>
      <div class="item">
        <div>月份</div>
        <div>成交额</div>
        <div>所占比例</div>
      </div>
      <div class="item" v-for="item in list" :key="item.month">
        <div>{{ item.month }}</div>
        <div>{{ item.price }}</div>
        <div>{{ item.rise }}</div>
        <div>
          <p :style="{'width': item.rise}"></p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import ListSearchBar from '@/components/listSearchBar/ListSearchBar.vue'
  export default {
    name: 'SellTotal',
    components: {
      PageTitle,
      ListSearchBar
    },
    data() {
      return {
        date: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        },
        list:[
          {
            month: 1,
            price: '100',
            rise: '50%'
          },
          {
            month: 2,
            price: '80',
            rise: '40%'
          },
          {
            month: 3,
            price: '60',
            rise: '20%'
          }
        ]
      }
    },
    methods: {
      handleDateChange() {
        console.log(this.date)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .date-pick {
    text-align: right;
    margin-bottom: 20px;
  }
  .item {
    display: flex;
    padding: 6px 0;
    font-size: 14px;
    align-items: center;
    div {
      flex: 0 0 100px;
      &:last-child {
        flex: 1;
        p {
          margin: 6px;
          padding: 0;
          height: 20px;
          background: $colorTheme;
          border-radius: 10px;
        }
      }
    }
  }
</style>
